<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.springframework.org/schema/data/jaxb">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>影库管理</title>
    <link th:href="@{/managerstatic/plugins/layui/css/layui.css}" rel="stylesheet" media="all" />
</head>

<body>
<div id="add-main" style="display: none;">
    <form class="layui-form" action="" style="margin-top: 30px;margin-right: 40px" id="form1">
        <input type="hidden" id="id" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">电影名称</label>
            <div class="layui-input-block">
                <input type="text" name="movename" id="movename" required  lay-verify="required" placeholder="电影名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主演</label>
            <div class="layui-input-block">
                <input type="text" name="mainactor" id="mainactor" required  lay-verify="required" placeholder="主演" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">导演</label>
            <div class="layui-input-block">
                <input type="text" name="director" id="director" required  lay-verify="required" placeholder="导演" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn" lay-event="getCheckLength1">编辑电影</button>
        <button class="layui-btn" lay-event="getCheckLength">删除电影</button>
    </div>
</script>


<script th:src="@{/managerstatic/plugins/jquery.min.js}"></script>
<script th:src="@{/managerstatic/plugins/layui/layui.js}"></script>
<script th:inline="none">
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'/schedule/queryAllMovie'//数据接口
            ,toolbar: '#toolbarDemo'
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 1 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页

            }
            ,cellMinWidth: 80
            ,id: 'testReload'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field:"id",title:'电影编号',width:200,align:"center"},
                {field:"img",title:'封面',width:250,align:"center",templet:'<div><img src="{{d.img}}"></div>'},
                {field:"movename",title:'电影名称',width:250,align:"center"},
                {field:"director",title:'导演',width:250,align:"center"},
                {field:"mainactor",title:'主演',width:250,align:"center"},
            ]]
        });
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){

                case 'getCheckLength':
                    var data = checkStatus.data;
                    var arr=new Array();
                    for(var i=0;i<data.length;i++){
                        arr.push(data[i].id)
                    }
                    layer.confirm('确定删除吗', function(){
                        $.ajax({
                            url:"/schedule/delMovie",
                            method:"post",
                            data:"arr="+arr,
                            success:function (result) {
                                if(result=="success"){
                                    layer.open({
                                        content: '已删除'
                                    });
                                    table.reload('testReload', {
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                    }, 'data');
                                }
                            }
                        })
                    });
                    break;
                case 'getCheckLength1':
                    var data = checkStatus.data;
                    if(checkStatus.data.length!=1){
                        alert("请选择一条数据")
                    }else {
                        var c=data[0];
                        $("#id").val(c.id);
                        $("#movename").val(c.movename);
                        $("#director").val(c.director);
                        $("#mainactor").val(c.mainactor);
                        insertForm();
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            console.log(obj);
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    // obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });


    function insertForm() {
        // emptyPlan();
        layer.open({
            // id:"addForm",
            type: 1,
            title:"信息查询",
            area: ['700px', '540px'],
            btn: ['确定', '取消'],
            content: $("#add-main"),
            yes:function(index){
                var table = layui.table;
                layer.confirm('确认修改吗', function(index1){
                    $.ajax({
                        url:"/schedule/editMovie",
                        data:$('#form1').serialize(),
                        success:function (result) {
                            if(result=="success"){
                                table.reload('testReload', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            }
                        },
                    })
                    layer.close(index1)
                    //向服务端发送删除指令
                });

                layer.close(index);

            }
        });
    }
</script>

</body>

</html>